<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>
<!--
   备忘录案例
   要求：
   1. 用户可以通过input框输入备忘录
   2. 使用无序列表展示用户输入的所有备忘录
   3. 每条备忘录均可以执行删除操作
   4. 显示备忘录的总条数
   5. 没有备忘录时 需要提示 备忘录列表为空，请添加，有备忘录时不提示
   6.不能添加空的备忘录，备忘录添加完成后，清空input框
   7.样式可以自定定义 不做要求
-->

<div id="app">
    <p><input type="text" placeholder="请输入备忘录" v-model="info" @keydown.enter="add">
        <button @click="add">添加</button>
    </p>
    <hr>
    <ul v-if="memos.length">
        <li v-for="(memo ,index) in memos" :key="index">
            {{memo}}
            <button @click="del(index)">删除</button>
        </li>
    </ul>
    <p v-else>没有备忘录，请添加</p>
    <hr>
    <p>备忘录共{{memos.length}}条</p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            info: '',
            memos: []
        },
        methods: {
            add() {
                if (this.info.trim()) {
                    this.memos.push(this.info)
                } else {
                    alert('备忘录信息不能为空')
                }
                this.info = ""
            },
            del(index) {
                //删除指定索引位的备忘录
                this.memos.splice(index, 1)
            }
        }
    })
</script>


</body>
</html>
